import React, { useState, useEffect } from 'react';
import styles from './Top.less';
import logo from '@/assets/图标.png';
import shishi from '@/assets/实事求是.png';

// 图片数组
const images = [
  require('@/assets/图片1.jpg'),
  require('@/assets/图片2.jpg'),
  require('@/assets/图片3.jpg'),
];

// 随机动画效果的函数
const getRandomAnimation = () => {
  const animations = ['fadeIn', 'slideLeft', 'slideRight', 'zoomIn']; // 你可以根据需要添加更多动画效果
  const randomIndex = Math.floor(Math.random() * animations.length);
  return animations[randomIndex];
};

const Top: React.FC = () => {
  const [currentImageIndex, setCurrentImageIndex] = useState<number>(0);
  const [animation, setAnimation] = useState<string>(''); // 当前动画
  const [currentTime, setCurrentTime] = useState<string>(''); // 当前时间
  // 更新当前时间
  useEffect(() => {
    const interval = setInterval(() => {
      const now = new Date();
      const date = now.toLocaleDateString(); // 获取日期 (例如: 2025-01-02)
      const time = now.toLocaleTimeString(); // 获取时间 (例如: 23:43:04)
      const weekday = now.toLocaleString('default', { weekday: 'long' }); // 获取星期几 (例如: 星期四)
      setCurrentTime(`${date} | ${time} ${weekday}`);
    }, 1000); // 每秒更新时间

    return () => clearInterval(interval); // 清除定时器
  }, []);


  // 定时切换图片和动画
  useEffect(() => {
    const interval = setInterval(() => {
      setAnimation(getRandomAnimation()); // 每次切换时随机选择一个动画效果
      const nextIndex = (currentImageIndex + 1) % images.length; // 循环切换图片
      setCurrentImageIndex(nextIndex);
    }, 15000); // 每15秒切换一次图片

    return () => clearInterval(interval); // 清除定时器
  }, [currentImageIndex]);

  return (
    <div>
      <div className={styles.container}>
        <div className={styles.topContent}>
          <img src={logo} alt="天津大学 logo" className={styles.logo} />
          <div className={styles.textContainer}>
            <p className={styles.title}>天津大学招生数据可视化平台</p>
            <p className={styles.subtitle}>Tianjin University Admission Data Visualization Platform</p>
          </div>
          <div className={styles.carousel}>
            <img
              src={images[currentImageIndex]}
              alt={`carousel ${currentImageIndex}`}
              className={`${styles.carouselImage} ${styles[animation]}`} // 根据动画类型添加类名
            />
          </div>
        </div>
      </div>

      {/* 显示当前时间的独立框 */}
      <div className={styles.timeBox}>
        <p className={styles.time}>{currentTime}</p>
      </div>
    </div>
  );
};

export default Top;
